<template>
    <div class="videowrapper container">
        <video class="h5video" :id="videoId" autoplay webkit-playsinline playsinline></video>
        <div class="h5controls">
            <div class="topShade">
                <div class="cloud" @click="changeControls">{{controlName}}</div>
            </div>
            <div class="bottomShade">
                <ul class="playControls" v-if="playControls">
                    <li @click="videoClose(videoId, $event)">
                        <i class="iconfont icon_guanbi"></i>
                    </li>
                    <li @click="videoSnapShot">
                        <i class="iconfont icon_jietu"></i>
                    </li>
                    <li @click="recordControl" :style="recordStyle">
                        <i class="iconfont" :class="recordIcon"></i>
                    </li>
                    <li @click="FullScreen">
                        <i :class="screenIcon"></i>
                    </li>
                    <li id="timeCount" v-if="timeCount">
                        <span>{{h}}:{{m}}:{{s}}</span>
                    </li>
                </ul>
                <ul class="brightControls" v-if="playControls">
                    <li @click="changeStream">
                        <i :class="streamIcon"></i>
                        <!--            <span class="changeName">码流切换</span>-->
                        <!--            <span class="stream">主码流</span>-->
                    </li>
                    <li @click="changeProto">
                        <i :class="protoIcon"></i>
                        <!--            <span class="changeName">协议切换</span>-->
                        <!--            <span class="stream">RTC</span>-->
                    </li>
                </ul>
                <ul class="directControls" v-if="cloudControls">
                    <li class="up">
                        <i class="iconfont icon_fangxiangjian" @mousedown="videoOperation('up', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('up', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                    <li class="right">
                        <i class="iconfont icon_fangxiangjian" @mousedown="videoOperation('right', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('right', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                    <li class="down">
                        <i class="iconfont icon_fangxiangjian" @mousedown="videoOperation('down', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('down', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                    <li class="left">
                        <i class="iconfont icon_fangxiangjian" @mousedown="videoOperation('left', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('left', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                </ul>
                <ul class="zoomControls" v-if="cloudControls">
                    <li class="zoomin">
                        <i class="iconfont icon_gongnengjian_fangda" @mousedown="videoOperation('zoomin', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('zoomin', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                    <li class="zoomout">
                        <i class="iconfont icon_gongnengjian_suoxiao" @mousedown="videoOperation('zoomout', $event)" @mouseup="videoOperation('stop', $event)" @touchstart="videoOperation('zoomout', $event)" @touchend="videoOperation('stop', $event)"></i>
                    </li>
                </ul>
                <!-- <div class="positionControls" v-if="cloudControls"> -->
                <div class="positionControls" v-if="false">
                    <span>预置位 {{presetNum}}/6</span>
                    <ul class="dotList">
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset1}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset1" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset1')"></i>
                        </li>
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset2}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset2" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset2')"></i>
                        </li>
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset3}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset3" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset3')"></i>
                        </li>
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset4}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset4" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset4')"></i>
                        </li>
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset5}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset5" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset5')"></i>
                        </li>
                        <li @click="preset($event)">
                            <span @dblclick="editName($event)" class="valShow">{{preset6}}</span>
                            <!--              <span class="valShow">{{preset1}}</span>-->
                            <i class="iconfont icon_jiasu1"></i>
                            <div class="presetInput">
                                <el-input :clearable="true" :autofocus="true" v-model="preset6" placeholder="添加新预置点" @blur="confirm"></el-input>
                            </div>
                            <i class="iconfont icon_shanchu" @click="deletePreset($event, 'preset6')"></i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="nameFramk">
            <span class="titleName">{{titleName}}</span>
        </div>
    </div>
</template>

<script>
/* eslint-disable */
import $ from "jquery";
import "./adapter.js";
import "./platform.js";
import { H5sPlayerWS, H5sPlayerHls, H5sPlayerRTC } from "./h5splayer.js";
import {
    H5siOS,
    H5sPlayerCreate,
    H5sSafariBrowser,
    GetURLParameter
} from "./h5splayerhelper.js";
export default {
    name: "videoPlayer",
    props: ["h5id", "h5videoid"],
    data () {
        return {
            // 预置点值
            preset1: "",
            preset2: "",
            preset3: "",
            preset4: "",
            preset5: "",
            preset6: "",
            videoId: this.h5videoid,
            checkItem: "",
            h5handler: undefined,
            playControls: true,
            cloudControls: false,
            controlName: "云台控制",
            presetNum: 0,
            timeCount: false,
            recordIcon: "icon_luxiang1",
            screenIcon: "iconfont icon_quanping1",
            titleName: "",
            h: "00",
            m: "00",
            s: "00",
            hour: 0,
            minute: 0,
            second: 0,
            timer: "",
            recordStyle: {},
            cStream: "sub",
            cProto: "RTC",
            protoIcon: "iconfont icon_RTC",
            streamIcon: "iconfont icon_zimaliu"
        };
    },
    beforeDestroy () {
        if (this.timeInterval) {
            clearInterval(this.timeInterval);
        }
        if (this.h5handler != undefined) {
            this.h5handler.disconnect();
            delete this.h5handler;
            this.h5handler = undefined;
        }
    },
    beforeRouteUpdate () {
        if (this.timeInterval) {
            clearInterval(this.timeInterval);
        }
    },

    destroyed () {
        if (this.timeInterval) {
            clearInterval(this.timeInterval);
        }
    },
    mounted () {
        let videoNmList = ["aaiuytrexza1526666a", "saafafd8fdsf4884dsf4df"];
        localStorage.videoNmList = videoNmList;
        // 根据屏幕分辨率的不同对zoom做出调整
        let screenWidth = $(document.body).width();
        if (screenWidth <= 1280) {
            $(".container").css({
                zoom: 0.72
            });
        } else {
            $(".container").css({
                zoom: 1
            });
        }

        let that = this;

        // 改变播放窗口缩放比例
        this.$root.bus.$on("changeZoom", function (val) {
            that.changeZoom(val);
        });

        // 控制面板
        let $container = $("#" + this.h5id);
        let $controls = $container.children(".h5controls");

        // control visibility
        $container.on("mouseover mouseout touchstart touchmove", function (e) {
            $controls.css("display", e.type === "mouseout" ? "none" : "block");
        });

        // 视频在线播放
        this.$root.bus.$on("videoPlay", function (
            data,
            videoId,
            proto,
            stream,
            hId
        ) {
            that.videoPlay(data, videoId, proto, stream, hId);
        });
        this.getHtmlNm();

        // 接收关闭所有视频的信号
        // try {
        //   this.$root.bus.$off("closeAllVideo");
        // } catch (e) {}
        this.$root.bus.$on("closeAllVideo", function (n) {
            if (that.h5handler !== undefined) {
                let maLiuClass = ".h5controls .bottomShade .brightControls li:first i";
                let xieYiClass = ".h5controls .bottomShade .brightControls li:last i";

                $(maLiuClass).each(function (i, ns) {
                    $(ns).removeClass();
                    $(ns).addClass("iconfont icon_zimaliu");
                });
                $(xieYiClass).each(function (i, ns) {
                    $(ns).removeClass();
                    $(ns).addClass("iconfont icon_RTC");
                });

                that.h5handler.disconnect();
                delete that.h5handler;
                that.h5handler = undefined;
                if (n != 1) {
                    let videoNmList = ["aaiuytrexza1526666a", "saafafd8fdsf4884dsf4df"];
                    localStorage.videoNmList = videoNmList;
                }

                $(".titleName").html("");

                $(".titleName").css({
                    display: "none"
                });
                $(".h5video").css({
                    display: "none"
                });
                that.titleName = "";
            }
        });
    },
    methods: {
        getHtmlNm () {
            this.timeInterval = setInterval(() => {
                let equipNmList = [];
                let videoList = this.$store.state.videoList;
                $(".titleName").each((i, element) => {
                    if ($(element).html() != "") {
                        if (equipNmList.length > 0) {
                            if (equipNmList.indexOf($(element).html()) == -1) {
                                equipNmList.push($(element).html());
                            }
                        } else {
                            equipNmList.push($(element).html());
                        }
                    }
                    videoList.forEach((item, s) => {
                        item.state = false;
                        for (var k = 0; k < equipNmList.length; k++) {
                            if ("中心 ● " + item.label == equipNmList[k]) {
                                item.state = true;
                            }
                        }
                    });
                });
                this.$store.commit("getVideoList", videoList);
            }, 2500);
        },
        // 消息提醒
        messageType (type, msg) {
            // 警告   warning
            // 成功  success
            // 取消   info
            this.$message({
                type: type,
                message: msg
            });
        },

        editName (e) {
            let aimDom = $(e.target);
            aimDom.css({
                display: "none"
            });
            aimDom
                .next()
                .next()
                .css({
                    display: "inline-block"
                });
        },

        confirm (e) {
            let aimDom = $(e.target);
            aimDom.parents(".presetInput").css({
                display: "none"
            });
            aimDom
                .parents(".presetInput")
                .prev()
                .prev()
                .css({
                    display: "inline-block"
                });
        },

        // 切换协议、切换码流
        switchProtocolStream (videoId, token, proto, stream) {
            var conf1 = {
                // videoid: 'h5sVideo1',
                videoid: videoId,
                protocol: this.$store.state.realProtocol, //'http:' or 'https:'
                host: this.$store.state.realHost, //'localhost:8080'
                rootpath: "/", // '/'
                token: token,
                streamprofile: stream, // {string} - stream profile, main/sub or other predefine transcoding profile
                hlsver: "v1", //v1 is for ts, v2 is for fmp4
                session: sessionStorage.SRToken //session got from login
            };
            // 选择WS或RTC协议
            if (proto == "RTC" || H5siOS() === true) {
                this.h5handler = new H5sPlayerRTC(conf1);
            } else {
                this.h5handler = new H5sPlayerWS(conf1);
            }

            this.h5handler.connect();
        },

        // 改变码流
        changeStream (e) {
            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];
            // e.stopPropagation();
            let stream = "main";
            if (this.streamIcon === "iconfont icon_zhumaliu") {
                this.streamIcon = "iconfont icon_zimaliu";
                this.cStream = "sub";
                this.switchProtocolStream(this.h5videoid, token, this.cProto, "sub");
                this.messageType("success", "已切换为子码流");
            } else {
                this.streamIcon = "iconfont icon_zhumaliu";
                this.cStream = "main";
                this.switchProtocolStream(this.h5videoid, token, this.cProto, "main");
                this.messageType("success", "已切换为主码流");
            }
        },

        // 视频区域全屏显示
        FullScreen (event, other) {
            if (this.screenIcon === "iconfont icon_quanping1") {
                this.screenIcon = "iconfont icon_quxiaoquanping";
            } else {
                this.screenIcon = "iconfont icon_quanping1";
            }

            let aimDom = "";
            let elem = "";
            aimDom = "#" + this.h5id;
            elem = $(aimDom).get(0);
            if (
                document.fullscreenEnabled
                || document.webkitFullscreenEnabled
                || document.mozFullScreenEnabled
                || document.msFullscreenEnabled
            ) {
                if (
                    document.fullscreenElement
                    || document.webkitFullscreenElement
                    || document.mozFullScreenElement
                    || document.msFullscreenElement
                ) {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }

                    this.updateUIExitFullScreen();
                } else {
                    if (elem.requestFullscreen) {
                        elem.requestFullscreen();
                    } else if (elem.webkitRequestFullscreen) {
                        elem.webkitRequestFullscreen();
                    } else if (elem.mozRequestFullScreen) {
                        elem.mozRequestFullScreen();
                    } else if (elem.msRequestFullscreen) {
                        elem.msRequestFullscreen();
                    }
                }
            } else {
                console.log("您的浏览器不支持全屏");
            }
        },

        // 改变协议
        changeProto (e) {
            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];
            // e.stopPropagation();
            if (this.protoIcon === "iconfont icon_RTC") {
                this.protoIcon = "iconfont icon_WS";
                this.cProto = "WS";
                this.switchProtocolStream(this.h5videoid, token, "WS", this.cStream);
                this.messageType("success", "已切换为WS协议");
            } else {
                this.protoIcon = "iconfont icon_RTC";
                this.cProto = "RTC";
                this.switchProtocolStream(this.h5videoid, token, "RTC", this.cStream);
                this.messageType("success", "已切换为RTC协议");
            }
        },

        // 控制录像
        recordControl (e) {
            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];
            e.stopPropagation();
            let that = this;
            if (this.h5handler === undefined) {
                this.$Notice.info({
                    title: "请选择设备"
                });
                return;
            }
            if (this.recordIcon === "icon_luxiang1") {
                this.recordIcon = "icon_luxiangzhong";
                this.timeCount = true;
                this.videoRecord("start", token);
                // aimDom.css('background', '#1F232F');
                this.recordStyle = {
                    background: "#1F232F"
                };
                // 录像计时器
                if (this.timer === "") {
                    this.timer = setInterval(function () {
                        if (that.recordIcon === "icon_luxiangzhong") {
                            that.recordIcon = "";
                        } else {
                            that.recordIcon = "icon_luxiangzhong";
                        }
                        that.second++;
                        if (that.second === 60) {
                            that.minute++;
                            that.second = 0;
                        }
                        if (that.minute === 60) {
                            that.hour++;
                            that.minute = 0;
                        }
                        that.s = that.second < 10 ? "0" + that.second : that.second;
                        that.m = that.minute < 10 ? "0" + that.minute : that.minute;
                        that.h = that.hour < 10 ? "0" + that.hour : that.hour;
                    }, 1000);
                }
            } else {
                this.h = "00";
                this.m = "00";
                this.s = "00";
                this.hour = 0;
                this.minute = 0;
                this.second = 0;
                clearInterval(this.timer);
                this.timer = "";

                this.recordIcon = "icon_luxiang1";
                this.videoRecord("end", token);
                this.recordStyle = {
                    background: "rgba(31, 35, 47, 0.5)"
                };
                this.timeCount = false;
            }
        },

        // 删除预置点
        deletePreset (e, aim) {
            this[aim] = "";
            e.stopPropagation();
            this.presetNum--;
            let aimDom = $(e.target);
            aimDom
                .prev()
                .children()
                .val("");
            aimDom.prev().css("display", "none");
            aimDom.css("display", "none");
            aimDom
                .prev()
                .prev()
                .css("display", "inline-block");
            aimDom
                .prev()
                .prev()
                .prev()
                .css("display", "none");
        },

        // 预置点区高亮
        preset (e) {
            e.stopPropagation();
            let aimDom = $(e.target);
            let localName = aimDom[0].localName;
            let className = aimDom[0].className;
            if (
                localName !== "li" &&
                localName !== "div" &&
                localName !== "input" &&
                localName !== "span"
            ) {
                if (className === "iconfont icon_jiasu1") {
                    this.presetNum++;
                }
                aimDom.css("display", "none");
                aimDom.next().css("display", "inline-block");
                aimDom
                    .next()
                    .next()
                    .css("display", "inline-block");
                aimDom = aimDom.parents("li");
            }
            if (!aimDom.hasClass("presetLight") && localName !== "div") {
                if (localName === "span") {
                    aimDom = aimDom.parents("li");
                }
                $('.dotList li[class*="presetLight"]').removeClass("presetLight");
                aimDom.addClass("presetLight");
            }
        },

        // 改变控制方式
        changeControls (e) {
            e.stopPropagation();
            if (this.cloudControls === false) {
                this.playControls = false;
                this.cloudControls = true;
                this.controlName = "播放控制";
            } else {
                this.playControls = true;
                this.cloudControls = false;
                this.controlName = "云台控制";
            }
        },

        // 改变当前播放窗口的缩放比例
        changeZoom (val) {
            this.$nextTick(function () {
                $(".container").css({
                    zoom: val
                });
            });
        },

        // 停止视频播放
        videoClose (id, e) {
            let that = this;
            let currentName = e.path[5].innerText.slice(5);
            let videoNmList = localStorage.videoNmList.split(",");

            let videoList = this.$store.state.videoList;

            if (videoList.length > 0) {
                videoList.forEach((item, i) => {
                    if ("中心 ● " + item.label === currentName) {
                        item.state = false;
                    }
                });
                this.$store.commit("getVideoList", videoList);
            }
            let indexNm = videoNmList.indexOf(String(currentName));
            if (indexNm > -1) {
                videoNmList.splice(indexNm, 1); //存在就删除
            }
            localStorage.videoNmList = videoNmList;

            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];
            this.switchProtocolStream(
                this.h5videoid,
                token,
                this.cProto,
                this.cStream
            );

            if (this.h5handler != undefined) {
                this.h5handler.disconnect();
                delete this.h5handler;
                this.h5handler = undefined;

                $("#" + id)
                    .get(0)
                    .load();
                $("#" + id).get(0).poster = "";

                this.cutUsingEq(this.titleName);
                let titleDom = "#" + this.h5id + " " + ".titleName";
                let titleDomVideo = "#" + this.h5id + " " + "video";

                let maLiuClass = "#" + this.h5id + " " + ".brightControls li:first i";
                let xieYiClass = "#" + this.h5id + " " + ".brightControls li:last i";

                $(maLiuClass).removeClass();
                $(xieYiClass).removeClass();

                setTimeout(() => {
                    $(maLiuClass).addClass("iconfont icon_zimaliu");
                    $(xieYiClass).addClass("iconfont icon_RTC");
                }, 100);

                this.titleName = "";
                $(titleDom).html("");
                $(titleDom).css({
                    display: "none"
                });
                $(titleDomVideo).css({
                    display: "none"
                });
                this.messageType("success", "关闭成功");
            }
        },

        // 视频在线预览
        videoPlay (item, videoId, proto, stream, hId) {
            let that = this;
            let nameList = localStorage.videoNmList.split(",");
            let nm = item.Path.replace("%", " ● ");

            if (hId !== this.h5id) {
                return;
            }
            if (this.h5handler != undefined) {
                this.cutUsingEq(this.titleName);
                this.h5handler.disconnect();
                delete this.h5handler;
                this.h5handler = undefined;
            }
            this.checkItem = item;
            let aimDom = "#" + videoId;
            let titleDom = "#" + hId + " " + ".titleName";
            let titleDomVideo = "#" + hId + " " + "video";
            let targetName = item.Path.split("%");
            this.titleName = targetName[0] + " ● " + targetName[1];

            $("#" + videoId)
                .parent()
                .find(".titleName")
                .html(this.titleName);
            $(titleDom).css({ display: "inline-block" });
            $(titleDomVideo).css({ display: "inline-block" });
            if (H5siOS() === true || H5sSafariBrowser() === true) {
                $(aimDom).prop("controls", true);
            }

            var strToken;
            strToken = GetURLParameter("token");
            if (strToken === undefined) {
                strToken = "token1";
            }
            var strStream = stream;
            var conf1 = {
                // videoid: 'h5sVideo1',
                videoid: videoId,
                protocol: this.$store.state.realProtocol, //'http:' or 'https:'
                host: this.$store.state.realHost, //'localhost:8080'
                rootpath: "/", // '/'
                token: item.token,
                streamprofile: strStream, // {string} - stream profile, main/sub or other predefine transcoding profile
                hlsver: "v1", //v1 is for ts, v2 is for fmp4
                session: sessionStorage.SRToken //session got from login
            };
            console.log('视频在线预览传参---videoPlayer---', conf1);
            // 选择WS或RTC协议
            if (proto == "RTC" || H5siOS() === true) {
                this.h5handler = new H5sPlayerRTC(conf1);
            } else {
                this.h5handler = new H5sPlayerWS(conf1);
            }

            this.h5handler.connect();

            $(aimDom).get(0).onplay = function () {
                console.log("The video has started to play");
            };
        },

        // 除去正在使用的监控视频
        cutUsingEq (eqName) {
            let set = this.$store.state.usingEq;
            for (let i in set) {
                if (set[i] === eqName) {
                    set.splice(i, 1);
                }
            }
            this.$store.state.usingEq = set;
        },

        // 判断字符串是否为空
        isNull (str) {
            return str === null || str.length === 0 || str === "";
        },

        // 视频云台控制
        videoOperation (direct, e) {
            // e.stopPropagation();
            // 获取token---
            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];

            this.$api
                .canVideoOperator({
                    hostUrl: "/api/v1/Ptz",
                    session: sessionStorage.SRToken,
                    token: token,
                    action: direct,
                    speed: "1",
                    preset: ""
                })
                .then(res => {
                    res = res.data;
                    if (res.HttpStatus == 200) {
                        var result = res.HttpData;
                        if (result.code == 200) {
                            var data = result.data;
                        }
                    }
                })
                .catch(err => {
                    console.log("云台控制失败！");
                });
        },

        // 快照
        videoSnapShot (e) {
            let tokenString = String(e.path[5].childNodes[0].outerHTML);
            let token = tokenString
                .split("?")[1]
                .split("&")[0]
                .split("=")[1];
            e.stopPropagation();

            this.$api
                .getVideoSnapshot({
                    hostUrl: "/api/v1/Snapshot",
                    session: sessionStorage.SRToken,
                    token: token
                })
                .then(res => {
                    res = res.data;
                    let code = res.code;
                    if (code === 200) {
                        this.messageType("success", "快照成功！");
                    } else {
                        this.$message.error("操作失败");
                    }
                })
                .catch(err => {
                    console.log("快照失败！");
                });
        },

        // 录像
        videoRecord (type, token) {
            let apiName = "";
            if (type == "start") {
                apiName = "/api/v1/ManualRecordStart";
            } else {
                apiName = "/api/v1/ManualRecordStop";
            }
            this.$api
                .getVideoManualRecord({
                    hostUrl: apiName,
                    session: sessionStorage.SRToken,
                    token: token
                })
                .then(res => {
                    console.log('res--', res)
                    res = res.data;
                    let code = res.code;
                    if (code == 200) {
                        if (type == "start") {
                            this.messageType("success", "已开始录像");
                        } else {
                            this.messageType("success", "已停止录像");
                        }
                    }
                })
                .catch(err => {
                    console.log("录像失败");
                });
        }
    }
};
</script>

 <style lang="scss" src="@assets/styles/videoPlayer.scss" scoped></style>
